import React from 'react';
import ReactDOM from 'react-dom'
// 使用类式组件实现需求
// export default class Demo extends React.Component {

//     state = {count:0}

//     add = ()=>{
//         this.setState(state => ({count:state.count+1}));
//     }

//     render() {
//         return (
//             <div>
//                 <h2>当前总和为：{this.state.count}</h2>
//                 <button onClick={this.add}>点我+1</button>
//             </div>
//         )
//     }
// }


/**
 * 我们知道，函数式组件由于无法使用this，所以也就不能像类式组件一样使用state和ref等属性
 * 但是在React16.8 之后，官方推出了3个hook，使得函数式组件也可以像类式组件一般使用对应的属性以及常用的生命周期函数
    (1). State Hook: React.useState()： 可以使用state
    (2). Effect Hook: React.useEffect(): 可以模拟生命周期钩子
    (3). Ref Hook: React.useRef()： 可以使用ref
 */

// 使用函数式组件实现需求
export default function Demo() {
    // 使用StateHook
    // useSate传入的值是初始值，返回值是一个数组，分别是当前该状态的值和修改该状态值的方法
    // 需要注意的是，useState第一次初始化指定的值在内部作缓存,后面再调用的时候就不会重新更新初始值了
    const [count,setCount] = React.useState(0);

    // 使用 Ref Hook,用法和React.createRef()一样
    const myRef = React.useRef();

    // 使用Effect Hook
    // userEffect需要传入2个参数，第一个相当于是组件加载好后执行的函数,第二个是指定具体监测的state
    // 当第二个参数为空数组时，表示不监测任何一个state，即组件只加载一次，相当于是 componentDidMount钩子
    // 当第二个参数传入真实的state时，那么一旦监测的state状态发生改变，那么第一个函数就会调用，相当于是 componentDidUpdate钩子 
    // 同时，useEffect的return需要传入一个方法，在组件销毁的时候调用，相当于是 componentWillUnmount钩子
    React.useEffect(()=>{
        let timer = setInterval(()=>{
            setCount(count => count+1);
        },1000)

        return ()=>{
           clearInterval(timer)
        }
    },[])

    function add() {
        // setCount(count+1);  setCount的第一种写法
        setCount(count => count+1)
    }

    function show(){
        alert(myRef.current.value);
    }


    
    return (
        <div>
            <input type="text" ref={myRef}/>
            <h2>当前总和为：{count}</h2>
            <button onClick={add}>点我+1</button>
            <button onClick={show}>点击提示文本框内容</button><br/>
            <button onClick={unmount}>点击卸载组件</button>
        </div>
    )
}
